<template>
  <div class="storeList">
    <table>
      <th>门店名称</th>
      <th>门店图片</th>
      <th>门店位置</th>
      <th>门店电话</th>
      <th>门店操作员</th>
      <th>操作</th>
      <tr v-for="item in data">
        <td>{{ item.name }}</td>
        <td>
          <img style="width:50%; height: 50%;" :src="item.img" alt="">
        </td>
        <td>{{ item.adress }}</td>
        <td>{{ item.phone }}</td>
        <td>{{ item.people }}</td>
        <td style="width: 200px;">
          <el-button type="text" @click="goDetail(item.id)">查看详情</el-button>
          <el-button type="text" @click="goSet(item.id)">修改信息</el-button>
          <el-button type="text" @click="del(item.id)">删除门店</el-button>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import { getShopListBx, DelShopListBx } from '../../utils/api'
export default {
  data() {
    return {
      data: [],
    }
  },
  created() {
    this.render()
  },
  methods: {
    render() {
      getShopListBx().then(res => {
        this.data = res.data.data
      })
    },
    goDetail(i) {
      this.$router.push({
        path: '/limits/listdetail',
        query: { id: i }
      })
    },
    goSet(i) {
      this.$router.push({
        path: '/limits/set/store',
        query: { id: i }
      })
    },
    del(i) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DelShopListBx({ id: i }).then(res => {
          if (res.status == 200) {
            this.render()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    }
  }
}
</script>
<style scoped>
table {
  margin-top: 30px;
  border: 1px solid #777777;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  font-size: 14px;
}

tr {
  height: 50px;
}

td {
  width: 150px;
  border: 1px solid #777777;
}

th {
  height: 50px;
  line-height: 50px;
  font-weight: normal;
  background-color: #F6F6F6;
  border: 1px solid #777777;
}

.storeList {
  font-size: 14px;
  margin-top: 100px;
}
</style>